<!DOCTYPE html>
<html lang=''>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id='app'>
        <!-- v-pre 跳过该元素及其所有子元素的编译。 -->
        <p v-pre>{{ message }}</p>

        <p>{{message}}</p>
        <hr>
        <!-- 
            v-memo 做缓存用的，我们内部的内容发生改变时不会重新渲染
            只有配置的依赖项发生变化时，才会重新渲染
        -->
        <p v-memo="[count]">{{message}}</p>

        <hr>
        <!-- v-cloak 作用是将无法立即显示的内容先隐藏掉，当准备好显示后直接显示 -->
        <h1 v-cloak>{{message}}</h1>
    </div>
</body>
<script>
    const app = Vue.createApp({
        data () {
            return {
                message: '为什么大家都喜欢去西藏，因为东躲西藏',
                count: 0
            }
        },
        mounted () {
            setTimeout(() => {
                this.message = '未来你的你一定会，感谢现在拼搏的你'
            }, 3000)

            setTimeout(() => {
                this.count = 10
            }, 6000)
        },
    })


    setTimeout(() => {
        app.mount('#app')
    }, 5000)


    /*
        v-text：直接渲染字符串，不做标签解析
        v-html： 渲染且解析字符串内的元素及样式
        v-show: 通过 CSS 实现显示或隐藏元素
        v-if：通过添加或移除一个标签实现显示隐藏
        v-else
        v-else-if
        v-for： 循环遍历数组或者对象或者数字，记得加 key 哟
        v-on: 监听事件用的，绑定事件用的
        v-bind: 添加绑定属性用的
        v-model：双向数据绑定
        v-slot：使用具名插槽时用的
        v-pre： 跳过编译直接渲染
        v-once： 只渲染一次，后期更新不做改变
        v-memo： 添加依赖项，只有依赖项改变时才会重新渲染
        v-cloak： 当没有准备好显示的时候先将其隐藏掉，准备后直接渲染
    */

</script>

</html>